<template>
    <div>
        <div class="el-descriptions">
            <div class="el-descriptions__header">
                <div class="el-descriptions__title">装备讨论（{{ total }}条）</div>
                <div class="el-descriptions__extra">
                    <el-button type="danger" icon="el-icon-edit"
                        @click="$refs.bbsDialogRef.dialogVisible = true">我要讨论</el-button>
                </div>
            </div>
        </div>
        <div class="mt-30">
            <div class="evaluate-item" v-for="item in list" :key="item.id" v-loading="loading">
                <el-row :gutter="30">
                    <el-col :span="2">
                        <el-avatar :size="60" :src="item.avatar" lazy></el-avatar>
                    </el-col>
                    <el-col :span="22">
                        <div class="evaluate-item__title flex">
                            <span class="username">{{ item.username }}</span>
                        </div>
                        <div class="evaluate-item__content">
                            {{ item.content }}
                        </div>
                        <div class="evaluate-item__pics">
                            <el-image :size="120" v-for="(item, index) in item.pics" :key="index" :src="item.pic"
                                lazy></el-image>
                        </div>
                        <div class="evaluate-item__footer flex space-between">
                            <div>
                                <span>发布时间：{{ item.create_time }}</span>
                            </div>
                            <div class="operate">
                                <span @click="showReplyForm(item.id)"><i class="el-icon-chat-dot-square"></i>回复</span>
                                <span :class="{ 'text-red': item.is_zan === 1 }" @click="dianzan(item)"><i
                                        class="el-icon-thumb"></i>点赞</span>
                            </div>
                        </div>
                        <el-card class="replay-form mt-15" v-if="replyFormOpen[item.id]">
                            <i class="el-icon-close" title="关闭" style="cursor: pointer;"
                                @click="replyFormOpen[item.id] = false"></i>

                            <form @submit.prevent="submitReply(item.id)" class="flex mt-10">
                                <el-input v-model="replyForm.content" :placeholder="`回复@${item.username}`"></el-input>
                                <button type="submit" class="el-button el-button--danger"
                                    :class="{ 'is-disabled': replyForm.content == null }"
                                    :disabled="replyForm.content == null">回复</button>
                            </form>
                        </el-card>
                        <div class="mt-10" v-if="item.replynum > 0">
                            <el-button type="info" plain size="mini" @click="handleShowReplyAll(item)">
                                查看全部 {{ item.replynum }} 条回复
                                <i class="el-icon-arrow-right"></i>
                            </el-button>
                        </div>
                    </el-col>
                </el-row>
            </div>

            <el-empty description="暂无装备讨论" v-if="isEmpty"></el-empty>

            <div class="text-center mt-30">
                <el-pagination @current-change="handleCurrentChange" :current-page="params.page"
                    :page-size="params.pagesize" :page-sizes="[10, 20, 30, 40]" layout="total, prev, pager, next"
                    :total="total" hide-on-single-page>
                </el-pagination>
            </div>
        </div>


        <bbsReplyAllDialog ref="bbsReplyAllDialogRef" :goods_id="params.goods_id"
            @refreshData="handleCurrentChange(1)" />

        <bbsDialog ref="bbsDialogRef" :goods_id="params.goods_id"
            @refreshData="handleCurrentChange(1)" />
    </div>
</template>

<script>
import bbsReplyAllDialog from './bbsReplyAllDialog.vue'
import bbsDialog from './bbsDialog.vue'
import { getSpuForumList, getAddSpuForumEvalZan, addSpuForumReply } from '@/api/apis'
export default {
    name: "bbs",
    components: {
        bbsDialog,
        bbsReplyAllDialog
    },
    props: {},
    data () {
        return {
            loading: true,
            list: [],
            isEmpty: false,
            total: 0, // 总条数
            params: {
                page: 1, // 当前页
                pagesize: 10, // 每页条数
                lastPage: 1, // 最后一页
                goods_id: this.$route.params.id, // 商品id
                type: 1 // 1: 教学视频 2: 教学资料
            },
            replyForm: {
                forum_id: '', // 评论id
                to_uid: '', // 回复给谁 一级评论不用传值
                reply_username: '', // 回复给谁 一级评论不用传值
                goods_id: this.$route.params.id,
                content: null,
                images: ''
            },
            replyFormOpen: {}
        }
    },
    mounted () {
        this.total === 0 && this.getList()
    },
    methods: {
        handleCurrentChange (val) {
            this.params.page = val
            this.getList()
        },
        getList() {
            let that = this
            that.loading = true
            getSpuForumList({
                ...that.params
            }).then(res => {
                if (res.code === 1) {
                    that.list = res.data.data
                    that.total = res.data.total
                    that.params.pagesize = Number(res.data.per_page)
                    that.params.lastPage = res.data.last_page
                    that.isEmpty = !that.list.length
                } else {
                    that.$message.error(res.msg)
                }
            })
            that.loading = false
        },
        // 点赞
        dianzan (item) {
            if (item.is_zan) return this.$message.info('您已赞过了')
            getAddSpuForumEvalZan({
                fe_id: item.id,
                type: 1
            }).then(res => {
                if (res.code === 1) {
                    this.$message.success(res.msg)
                    item.is_zan = 1
                    this.$forceUpdate()
                } else {
                    this.$message.error(res.msg)
                }
            })
        },
        // 回复评论
        reply (item) {
            this.$refs.bbsReplyDialogRef.ruleForm.forum_id = item.id
            this.$refs.bbsReplyDialogRef.ruleForm.to_uid = item.uid
            this.$refs.bbsReplyDialogRef.ruleForm.reply_username = item.username
            this.$refs.bbsReplyDialogRef.dialogVisible = true
        },
        handleShowReplyAll(item){
            this.$refs.bbsReplyAllDialogRef.source = item
            this.$refs.bbsReplyAllDialogRef.dialogVisible = true
        },
        showReplyForm (commentId) {
            const newReplyFormOpen = Object.keys(this.replyFormOpen).reduce((acc, key) => {
                acc[key] = false
                return acc
            }, {})
            newReplyFormOpen[commentId] = true
            this.replyFormOpen = newReplyFormOpen;
        },
        submitReply (commentId) {
            // 提交回复
            this.replyForm.forum_id = commentId;
            addSpuForumReply(this.replyForm).then(res => {
                if (res.code === 1) {
                    this.$message.success(res.msg)
                    //this.$emit('refreshData')
                    //this.resetForm()
                    this.replyForm.content = null;
                    this.replyFormOpen = {
                        ...this.replyFormOpen,
                        [commentId]: false
                    }
                } else {
                    this.$message.error(res.msg)
                }
            });
        }
    }
}
</script>

<style lang="less" scoped>
/deep/.el-descriptions__header {
    height: 62px;

    margin-bottom: 0;
    background-color: rgba(46, 48, 51, .05);

    .el-descriptions__title {
        text-indent: 30px;
    }

    .el-descriptions__extra {
        margin-right: 15px;
    }
}

.evaluate-item {
    padding-top: 30px;
    overflow: hidden;

    &__title {
        .username {
            color: #2E3033;
            font-size: 16px;
            margin-right: 10px;
        }
    }

    &__content {
        margin-top: 15px;
        font-size: 14px;
        color: #2E3033;

        p {
            line-height: 1.6;
            margin-bottom: 5px;
        }
    }

    &__pics {
        margin-top: 15px;
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        margin-bottom: 10px;

        .el-image {
            width: 60px;
            height: 60px;
            border-radius: 5px;
        }
    }

    &__footer {
        font-size: 14px;
        color: rgba(46, 48, 51, .6);

        span {
            &+span {
                margin-left: 30px;
            }

            i {
                margin-right: 5px;
            }
        }

        .operate {
            span {
                cursor: pointer;

                &:hover {
                    color: rgba(46, 48, 51, 1);
                }
            }
        }
    }

    .el-col-22 {
        padding-bottom: 30px;
        border-bottom: 1px solid rgba(46, 48, 51, .1)
    }
}

.replay-form {
    position: relative;

    .el-icon-close {
        position: absolute;
        top: 10px;
        right: 10px;
        transition: transform 0.5s ease;
        transform-origin: center;

        &:hover {
            transform: rotate(90deg);
            color: #ff0000;
        }
    }
}
</style>